<template>
<div class='box'>
  <div class="header">
    <van-nav-bar title="健康评测" left-text="<" @click-left="$router.go(-1)" />
  </div>
  <div class="main">
    <div v-for='(item,index) in arr' :key='index' @click='goStart(index,item.title,item.color)'>
      <img :src='item.src'>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      arr: [{
          src: require('@/assets/Healthy/one.jpg'),
          title: '爱腰达人,健康自测',
          color: '#9DC4D4'
        },
        {
          src: require('@/assets/Healthy/two.jpg'),
          title: '测测你最真实的一面',
          color: '#AB989C'
        },
        {
          src: require('@/assets/Healthy/three.jpg'),
          title: '测测你的生活为什么那么累',
          color: '#AAA496'
        },
        {
          src: require('@/assets/Healthy/four.jpg'),
          title: '骨质疏松风险测试',
          color: '#ECEAED'
        },
        {
          src: require('@/assets/Healthy/five.jpg'),
          title: '糖尿病风险测试',
          color: '#E9CD47'
        },
        {
          src: require('@/assets/Healthy/six.jpg'),
          title: '胃部压力测试',
          color: '#ECEAED'
        },
        {
          src: require('@/assets/Healthy/seven.jpg'),
          title: '测试你的致命弱点是什么',
          color: '#EAD05F'
        },
        {
          src: require('@/assets/Healthy/eight.jpg'),
          title: '女性健康,疾病自测',
          color: '#93CDD5'
        },
        {
          src: require('@/assets/Healthy/nine.jpg'),
          title: '从发短信习惯看出你的性格',
          color: '#D0C4B8'
        },
        {
          src: require('@/assets/Healthy/ten.jpg'),
          title: '测测你的内心阳光还是黑暗',
          color: '#5C6C90'
        }
      ]
    }
  },
  methods: {
    goStart(index, title, color) {
      this.$router.push({
        path: 'healthSurvey/surveyStart',
        query: {
          index: index,
          title: title,
          color: color
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;

  .header {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .main {
    width: 100%;
    height: 100%;
    overflow: auto;

    img {
      width: 100%;
    }
  }
}
</style>
